<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>煤球对战平台 - 登录</title>
	<link rel="stylesheet" href="home/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="home/css/index.css">
	<link rel="stylesheet" href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
	<style type="text/css">
		.main { margin-top: 3%; }
		#regbtn { margin-right: 15px; background-color: yellowgreen; }
		#veryfy { width: 50%; float: left; margin-right: 1em; }
		.verifyimg { float: left; }
		.form-bg{ background: #00b4ef; }

		.form-horizontal{
		    background: #fff;
		    padding-bottom: 40px;
		    border-radius: 15px;
		    text-align: center;
		}
		.form-horizontal .heading{
		    display: block;
		    font-size: 35px;
		    font-weight: 700;
		    padding: 35px 0;
		    border-bottom: 1px solid #f0f0f0;
		    margin-bottom: 30px;
		}
		.form-horizontal .form-group{
		    padding: 0 40px;
		    margin: 0 0 25px 0;
		    position: relative;
		}
		.form-horizontal .form-control{
		    background: #f0f0f0;
		    border: none;
		    border-radius: 20px;
		    box-shadow: none;
		    padding: 0 20px 0 45px;
		    height: 40px;
		    transition: all 0.3s ease 0s;
		}
		.form-horizontal .form-control:focus{
		    background: #e0e0e0;
		    box-shadow: none;
		    outline: 0 none;
		}
		.form-horizontal .form-group i{
		    position: absolute;
		    top: 12px;
		    left: 60px;
		    font-size: 17px;
		    color: #c8c8c8;
		    transition : all 0.5s ease 0s;
		}
		.form-horizontal .form-control:focus + i{
		    color: #00b4ef;
		}
		.form-horizontal .fa-question-circle{
		    display: inline-block;
		    position: absolute;
		    top: 12px;
		    right: 60px;
		    font-size: 20px;
		    color: #808080;
		    transition: all 0.5s ease 0s;
		}
		.form-horizontal .fa-question-circle:hover{ color: #000; }

		.form-horizontal .text{
		    float: left;
		    margin-left: 7px;
		    line-height: 20px;
		    padding-top: 5px;
		}
		.form-horizontal .btn{
		    float: right;
		    font-size: 14px;
		    color: #fff;
		    background: #00b4ef;
		    border-radius: 30px;
		    padding: 10px 25px;
		    border: none;
		    text-transform: capitalize;
		    transition: all 0.5s ease 0s;
		}
		@media only screen and (max-width: 479px){
		    .form-horizontal .form-group{ padding: 0 25px; }
		    .form-horizontal .form-group i{ left: 45px; }
		    .form-horizontal .btn{ padding: 10px 20px; }
	</style>
	<!--[if IE]>
		<script src="http://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
	<![endif]-->
</head>
<body>
    <div class="container">
        <div class="row main" id="login">
            <div class="col-md-offset-3 col-md-6">
                <form class="form-horizontal" action="{{url('/user/editpwd')}}" method="post">
                	{!! csrf_field() !!}
                    <span class="heading">修改新密码</span>
					<div class="form-group">
							<input type="password" class="form-control" id="user_password" name="user_password" placeholder="密　码:必须是字母和数字,在6~12位之间" id="user_password">
							<i class="fa fa-lock"></i>
					</div>
					<div class="form-group">
							<input type="password" class="form-control" id="repassword" name="repassword" placeholder="确认密码:必须是字母和数字,在6~12位之间">
							<i class="fa fa-lock"></i>
					</div>
                    <div class="form-group">
                        <button type="submit" id="sub" class="btn btn-default">确认修改</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
	<script src="home/js/jquery-1.11.1.min.js"></script>
	<script src="home/bootstrap/js/bootstrap.min.js"></script>
	<script>
	$(document).ready(function(){

	});

	var clicktype = {
	    'user_password':'',
	    'repassword':'',
	};
	var upass = $('#user_password');
	var repass = $('#repassword');

	upass.blur(function(){
	    var match = /[A-Za-z0-9]{6,12}/;
	    var ev = match.test(upass.val())?1:0;
	    if (ev==1) {
	        upass.css("background-color","rgb(169, 240, 180)");
	        clicktype.user_password = true;
	    } else {
	        repass.css("background-color","rgb(255, 185, 185)");
	        upass.css("background-color","rgb(255, 185, 185)");
	        upass.val('');
	        repass.val('');
	        clicktype.user_password = false;
	    }
	});

	upass.focus(function(){
	    upass.css("background-color","#efefef");
	    repass.css("background-color","#CCC");
	});

	repass.blur(function(){
	    if (repass.val() === upass.val() && repass.val() !== '') {
	        repass.css("background-color","rgb(169, 240, 180)");
	        upass.css("background-color","rgb(169, 240, 180)");
	        clicktype.repassword = true;
	    } else {
	        repass.css("background-color","rgb(255, 185, 185)");
	        upass.css("background-color","rgb(255, 185, 185)");
	        repass.val('');
	        upass.val('');
	        clicktype.repassword = false;
	    }
	});

	repass.focus(function(){
	    repass.css("background-color","#efefef");
	    upass.css("background-color","#efefef");
	});


	</script>
</html>
